<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		body { font-family:Arial; font-size:12pt; padding:20px; width:800px; margin:20px auto; border:solid 1px black; }
		h1 { font-size:16pt; }
		h2 { font-size:13pt; }
		ul { margin:0px; padding:0px; margin-left:20px; }
		#list1, #list2 { width:350px; list-style-type:none; margin:0px; }
		#list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }
		#list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
		#list2 { float:right; }
		.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
		table { float:right; border-collapse:collapse; }
		td { border: 1px solid gray; padding:5px; }
	</style>
</head>
<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.dragsort-0.4.2.min.js"></script>
	
	<h1>jQuery List DragSort Example</h1>
	
	<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
	<br/>

	<h2>Simple 1D list:</h2>
	
	<ul>
		<li>bread</li>
		<li>vegetables</li>
		<li>meat</li>
		<li>milk</li>
		<li>butter</li>
		<li>ice cream</li>
	</ul>
	<br/>
	
	<script type="text/javascript">
		$("ul:first").dragsort();
	</script>
	
	<h2>2D list with drag and drop between lists:</h2>
	
	<ul id="list2">
		<li><div>10</div></li>
		<li><div>11</div></li>
		<li><div>12</div></li>
		<li><div>13</div></li>
		<li><div>14</div></li>
		<li><div>15</div></li>
		<li><div>16</div></li>
		<li><div>17</div></li>
		<li><div>18</div></li>
	</ul>
	
	<ul id="list1">
		<li><div style="background-color:orange;">1</div></li>
		<li><div>2</div></li>
		<li><div>3</div></li>
		<li><div>4</div></li>
		<li><div>5</div></li>
		<li><div>6</div></li>
		<li><div>7</div></li>
		<li><div>8</div></li>
		<li><div>9</div></li>
	</ul>
	
	<!-- save sort order here which can be retrieved on server on postback -->
	<input name="list1SortOrder" type="hidden" />

	<script type="text/javascript">
		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
	</script>

	<div style="clear:both;"></div>

	<h2>Usage</h2>
	$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "&lt;li&gt;&lt;/li&gt;" });<br/>
	<br/>
	<dl>
		<dt>dragSelector</dt>
		<dd>The <a href="http://docs.jquery.com/Selectors">CSS selector</a> of the element inside the list item to act as the drag handle. The default is LI.</dd>
		<dt>dragSelectorExclude</dt>
		<dd>The css selector of the elements inside the dragSelector to not trigger dragsort. The default is "input, textarea, a[href]".</dd>
		<dt>dragEnd</dt>
		<dd>The callback function that will be called after the dragging has ended.</dd>
		<dt>dragBetween</dt>
		<dd>Set to "true" if you want to enable the ability to drag between selected lists. The default is false.</dd>
		<dt>placeHolderTemplate</dt>
		<dd>The html of the place holder for the dragged item. The default is "&lt;li&gt;&lt;/li&gt;".</dd>
		<dt>scrollContainer</dt>
		<dd>The css selector of the element that is to act as the scroll container e.g. a div with overflow set to auto. The default is window.</dd>
		<dt>scrollSpeed</dt>
		<dd>A number that represents the speed that the page will scroll when dragging an item outside the scroll container, a higher value is faster and a lower value is slower. Set to 0 to disable scrolling. The default is 5.</dd>
	</dl>
</body>
</html>
